<!DOCTYPE HTML >
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>成都大学-一卡通充值</title>
    <link href="/css/weui.css" rel="stylesheet">
    <style type="text/css">
        html, body {
            margin: 0 auto;
            background: #f2f2f2;
        }

        .mchWarp {
            position: relative;
            margin-top: 20px;
            margin-bottom: 5px;
            background-color: #fff;
            border: 1px solid #fff;
            box-shadow: 0 0 5px #dddddd;
        }

        .mchWarp .logo {
            position: absolute;
            left: 5px;
            top: 50%;
            height: 80px;
            line-height: 80px;
            margin-top: -40px;
        }

        .mchWarp .logo img {
            vertical-align: middle;
            height: 50px;
            border-radius: 1000px;
        }

        .mchWarp .mchInfo {
            width: 80%;
            float: right;
        }

        .mchWarp .mchInfo h3 {
            margin: 5px 0 2px 0;
            font-size: 18px;
        }

        .mchWarp .mchInfo i {
            margin: 2px 0 1px 0;
            font-size: 12px;
            font-style: normal;
            color: #666;
        }

        .clearfloat:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .clearfloat {
            zoom: 1
        }

        .inputBox {
            margin-top: 5px;
            padding: 5px 5px;
            background: #fff;
            border: 1px solid #fff;
            box-shadow: 0 0 5px #dddddd;
        }

        .inputBox label, .inputBox input {
            display: block;
            line-height: 40px;
        }

        .inputBox label {
            font-size: 14px;
        }

        .inputBox input {
            height: 40px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #amount {
            text-align: left;
        }
    </style>
</head>

<body>
<form action="pay/submit" onsubmit="submitForm()" id="form">
    <div class="mchWarp clearfloat">
        <div class="logo">
            <img src="/images/wxpay.png">
        </div>
        <div class="mchInfo">
            <h3>成都大学一卡通充值</h3>
            <i>请输入充值金额</i>
        </div>
    </div>
    <div class="inputBox">
        <label>金额(￥):</label>
        <input class="weui_input weui_btn" id="amount" name="amount" type="text" placeholder="请输入金额">
        <button type="submit" class="weui_btn weui_btn_primary">确定</button>
    </div>
</form>

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
    function submitForm() {
        $.post("/pay/submit", $("#form").serialize(),
                function (data, status) {
                    if (data.state) {
                        pay(data);
                    } else {
                        alert(data.message);
                    }
                });
    }
    function pay(data) {
        WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": data.appid,
                    "timeStamp": data.timeStamp,
                    "nonceStr": data.nonceStr,
                    "package": data.package,
                    "signType": data.signType,
                    "paySign": data.paySign
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        alert("支付成功!");
                    } else {
                        alert("支付失败!");
                    }
                    WeixinJSBridge.call('closeWindow');
                }
        );
    }
</script>
</body>
</html>